PageFooter.renderContactTable - Code Metrics - Inspection of "Push." - soniCaH/KCVV-Elewijt-Gatsby - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — feature/full-redesign ( c0fbb9...b4445b )

by Kevin Van

created 2022-07-10 16:27 UTC

PageFooter.renderContactTable B

↳ Parent: PageFooter

Complexity

Conditions

Size

Total Lines	61
Code Lines	61

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	61
dl	0
loc	61
rs	8.2763
c	0
b	0
f	0
cc	1

How to fix Long Method

import React, { Component } from "react"

import logo from "../images/logo-flat.png"
import "./page-footer.scss"
import SponsorsBlock from "./sponsors-block"

class PageFooter extends Component {
  renderSocialLinks = () => (
    <div className={`page-footer__contact--social`}>
      <ul className="social-links social-links--circle">
        <li className="social-links__item">
          <a
            href="https://facebook.com/KCVVElewijt/"
            className="social-links__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa fa-facebook" />
          </a>
        </li>
        <li className="social-links__item">
          <a href="https://twitter.com/kcvve" className="social-links__link" target="_blank" rel="noopener noreferrer">
            <i className="fa fa-twitter" />
          </a>
        </li>
        <li className="social-links__item">
          <a
            href="https://www.instagram.com/kcvve"
            className="social-links__link"
            target="_blank"
            rel="noopener noreferrer"
          >
            <i className="fa fa-instagram" />
          </a>
        </li>
      </ul>
    </div>
  )
  renderContactTable = () => (
    <table className="page-footer__contact-details">
      <tbody>
        <tr>
          <th className="page-footer__contact-details__label">KCVV Elewijt</th>
          <td className="page-footer__contact-details__value">Driesstraat 30, 1982 Elewijt</td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Voorzitter</th>
          <td className="page-footer__contact-details__value">Rudy Bautmans</td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">GC</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={`rich-link`}>
              John De Ron
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Algemeen contact</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={`rich-link`}>
              [email protected]
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Jeugdwerking</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={`rich-link`}>
              [email protected]
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Verhuur kantine</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={`rich-link`}>
              Ann Walgraef
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Website</th>
          <td className="page-footer__contact-details__value">
            <a href="mailto:[email protected]" className={`rich-link`}>
              Kevin Van Ransbeeck
            </a>
          </td>
        </tr>
        <tr>
          <th className="page-footer__contact-details__label">Privacy &amp; cookies</th>
          <td className="page-footer__contact-details__value">
            <a href="/privacy" className={`rich-link`}>
              Privacyverklaring
            </a>
          </td>
        </tr>
      </tbody>
    </table>
  )
  render() {
    return (
      <footer className="page-footer">
        <div className="page-footer--widgets grid-container grid-x">
          <div className="small-12 large-6 cell page-footer__contact">
            <div className="page-footer__contact-top">
              <div className={`page-footer__contact--logo`}>
                <img src={logo} alt="KCVV Elewijt" />
              </div>

              {this.renderSocialLinks()}
            </div>
            <div className="page-footer__contact-middle">{this.renderContactTable()}</div>
          </div>

          <div className="small-12 large-6 cell page-footer__sponsors">
            <SponsorsBlock />
          </div>
        </div>
      </footer>
    )
  }
}

export default PageFooter


1			import React, { Component } from "react"
2
3			import logo from "../images/logo-flat.png"
4			import "./page-footer.scss"
5			import SponsorsBlock from "./sponsors-block"
6
7			class PageFooter extends Component {
8			renderSocialLinks = () => (
9			<div className={`page-footer__contact--social`}>
10			<ul className="social-links social-links--circle">
11			<li className="social-links__item">
12			<a
13			href="https://facebook.com/KCVVElewijt/"
14			className="social-links__link"
15			target="_blank"
16			rel="noopener noreferrer"
17			>
18			<i className="fa fa-facebook" />
19			</a>
20			</li>
21			<li className="social-links__item">
22			<a href="https://twitter.com/kcvve" className="social-links__link" target="_blank" rel="noopener noreferrer">
23			<i className="fa fa-twitter" />
24			</a>
25			</li>
26			<li className="social-links__item">
27			<a
28			href="https://www.instagram.com/kcvve"
29			className="social-links__link"
30			target="_blank"
31			rel="noopener noreferrer"
32			>
33			<i className="fa fa-instagram" />
34			</a>
35			</li>
36			</ul>
37			</div>
38			)
39			renderContactTable = () => (
40			<table className="page-footer__contact-details">
41			<tbody>
42			<tr>
43			<th className="page-footer__contact-details__label">KCVV Elewijt</th>
44			<td className="page-footer__contact-details__value">Driesstraat 30, 1982 Elewijt</td>
45			</tr>
46			<tr>
47			<th className="page-footer__contact-details__label">Voorzitter</th>
48			<td className="page-footer__contact-details__value">Rudy Bautmans</td>
49			</tr>
50			<tr>
51			<th className="page-footer__contact-details__label">GC</th>
52			<td className="page-footer__contact-details__value">
53			<a href="mailto:[email protected]" className={`rich-link`}>
54			John De Ron
55			</a>
56			</td>
57			</tr>
58			<tr>
59			<th className="page-footer__contact-details__label">Algemeen contact</th>
60			<td className="page-footer__contact-details__value">
61			<a href="mailto:[email protected]" className={`rich-link`}>
62			[email protected]
63			</a>
64			</td>
65			</tr>
66			<tr>
67			<th className="page-footer__contact-details__label">Jeugdwerking</th>
68			<td className="page-footer__contact-details__value">
69			<a href="mailto:[email protected]" className={`rich-link`}>
70			[email protected]
71			</a>
72			</td>
73			</tr>
74			<tr>
75			<th className="page-footer__contact-details__label">Verhuur kantine</th>
76			<td className="page-footer__contact-details__value">
77			<a href="mailto:[email protected]" className={`rich-link`}>
78			Ann Walgraef
79			</a>
80			</td>
81			</tr>
82			<tr>
83			<th className="page-footer__contact-details__label">Website</th>
84			<td className="page-footer__contact-details__value">
85			<a href="mailto:[email protected]" className={`rich-link`}>
86			Kevin Van Ransbeeck
87			</a>
88			</td>
89			</tr>
90			<tr>
91			<th className="page-footer__contact-details__label">Privacy & cookies</th>
92			<td className="page-footer__contact-details__value">
93			<a href="/privacy" className={`rich-link`}>
94			Privacyverklaring
95			</a>
96			</td>
97			</tr>
98			</tbody>
99			</table>
100			)
101			render() {
102			return (
103			<footer className="page-footer">
104			<div className="page-footer--widgets grid-container grid-x">
105			<div className="small-12 large-6 cell page-footer__contact">
106			<div className="page-footer__contact-top">
107			<div className={`page-footer__contact--logo`}>
108			<img src={logo} alt="KCVV Elewijt" />
109			</div>
110
111			{this.renderSocialLinks()}
112			</div>
113			<div className="page-footer__contact-middle">{this.renderContactTable()}</div>
114			</div>
115
116			<div className="small-12 large-6 cell page-footer__sponsors">
117			<SponsorsBlock />
118			</div>
119			</div>
120			</footer>
121			)
122			}
123			}
124
125			export default PageFooter
126

soniCaH / KCVV-Elewijt-Gatsby

Push — feature/full-redesign ( c0fbb9...b4445b )

PageFooter.renderContactTable B

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like